<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar title="价格查询"></dawnBar>

		<view class="page-container">

			<view class="dawn-box tn-margin-bottom-sm" style="display: block;">
				<view class="tn-flex tn-margin-bottom-sm">
					<view class="" @click="chooseType('YP')">
						<view style="padding: 15rpx 35rpx;" class="dawn-radius tn-text-ellipsis tn-text-center"
							:class="queryData.type === 'YP'?'tn-bg-dawn':'tn-bg-dawn-gray'">
							<view class="dawn-text-md">
								药品
							</view>
						</view>
					</view>
					<view @click="chooseType('SFXM')">
						<view style="padding: 15rpx 35rpx;"
							class="tn-margin-left-xs dawn-radius tn-text-ellipsis tn-text-center"
							:class="queryData.type === 'SFXM'?'tn-bg-dawn':'tn-bg-dawn-gray'">
							<view class="dawn-text-md">
								项目
							</view>
						</view>
					</view>
				</view>
				<!-- 搜索框 -->
				<view class=" tn-flex tn-flex-col-center tn-flex-row-center tn-width-full">
					<view style="width: 90%;"
						class="tn-margin-right-xs dawn-radius tn-padding-xs dawn-text-sm tn-flex tn-flex-col-center tn-bg-gray--light tn-color-gray--dark">
						<view class="tn-icon-search tn-margin-right-ss"></view>
						<tn-input v-model="queryData.keywords" class="dawn-input-text"
							:placeholder="queryData.type==='YP'?'请输入药品关键字':'请输入项目关键字'" :clearable="true"
							type="text"></tn-input>
					</view>
					<tn-button @click="getData()" backgroundColor="tn-main-gradient-dawn" size="sm" shadow
						padding="34rpx 20rpx">
						<text class="tn-icon-search-menu-fill tn-padding-right-ss dawn-text-sm"></text>
						<text class="tn-text-ellipsis dawn-text-sm">搜索</text>
					</tn-button>
				</view>
			</view>
			
			<view v-if="queryData.type === 'YP' " class="tn-bg-white tn-padding dawn-radius tn-margin-bottom-sm" v-for="(item,index) in list"
				:key="item.id">
				<view class="list-text">
					<view class="list__left">
						<view class="list__left__text">药品名称</view>
					</view>
					<view class="list__right list__right__text">
						{{item.drugName || '' }}
					</view>
				</view>
				<view class="list-text">
					<view class="list__left">
						<view class="list__left__text">药品编码</view>
					</view>
					<view class="list__right list__right__text">
						{{item.drugId || '' }}
					</view>
				</view>

				<view class="list-text">
					<view class="list__left">
						<view class="list__left__text">药品拼音码</view>
					</view>
					<view class="list__right list__right__text">
						{{item.spellCode || '' }}
					</view>
				</view>
				
				<view class="list-text">
					<view class="list__left">
						<view class="list__left__text">药品剂型</view>
					</view>
					<view class="list__right list__right__text">
						{{item.doceCode || '' }}
					</view>
				</view>

				<view class="list-text">
					<view class="list__left">
						<view class="list__left__text">规格</view>
					</view>
					<view class="list__right list__right__text">
						{{item.spec || '' }}
					</view>
				</view>

				<view class="list-text">
					<view class="list__left">
						<view class="list__left__text">现价</view>
					</view>
					<view class="list__right list__right__text">
						¥ {{item.unitPrice || '' }}
					</view>
				</view>
				<view class="list-text">
					<view class="list__left">
						<view class="list__left__text">单位</view>
					</view>
					<view class="list__right list__right__text">
						{{item.stockUnit || '' }}
					</view>
				</view>

				<view class="list-text">
					<view class="list__left">
						<view class="list__left__text">产地</view>
					</view>
					<view class="list__right list__right__text">
						{{item.productionenterprises || '' }}
					</view>
				</view>
			</view>

			<view v-if="queryData.type === 'SFXM' " class="tn-bg-white tn-padding dawn-radius tn-margin-bottom-sm" v-for="(item,index) in list"
				:key="item.id">
				
				<view class="list-text">
					<view class="list__left">
						<view class="list__left__text">项目名称</view>
					</view>
					<view class="list__right list__right__text">
						{{item.drugName || '' }}
					</view>
				</view>
				<view class="list-text">
					<view class="list__left">
						<view class="list__left__text">项目编码</view>
					</view>
					<view class="list__right list__right__text">
						{{item.drugId || '' }}
					</view>
				</view>
				
				<view class="list-text">
					<view class="list__left">
						<view class="list__left__text">项目拼音码</view>
					</view>
					<view class="list__right list__right__text">
						{{item.spellCode || '' }}
					</view>
				</view>
				
				<view class="list-text">
					<view class="list__left">
						<view class="list__left__text">单位</view>
					</view>
					<view class="list__right list__right__text">
						{{item.stockUnit || '' }}
					</view>
				</view>
				
				<view class="list-text">
					<view class="list__left">
						<view class="list__left__text">现价</view>
					</view>
					<view class="list__right list__right__text">
						¥ {{item.unitPrice || '' }}
					</view>
				</view>
				
			</view>
			
			
			<view v-if="show">
				<dawnMsg :msg="msg"></dawnMsg>
			</view>

		</view>


		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>


		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>

	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as PubApi from "@/api/hospital/pub.js";
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'order',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'patientInfo']),
		data() {
			return {
				swiperHeight: 0,
				loading: false,
				show: false,
				msg: '',
				queryData: {
					pageSize: -1,
					pageNo: 1,
					type: 'YP',
					keywords: ''
				},
				total: 0,
				list: [],
				resultData: {},
			}
		},
		onLoad(options) {
			if (!this.isLogin) {
				toLogin();
				return;
			}
		},
		// onReady() {
		// 	this.$nextTick(() => {
		// 		this.updateSwiperInfo()
		// 	})
		// },
		methods: {
			chooseType(val){
				this.queryData.type = val;
				this.getData();
			},
			getData: function(page) {
				let that = this;
				if (!this.queryData.keywords) {
					return this.$util.Tips({
						title: '请输入关键字'
					});
				}
				this.list = [];
				this.loading = true;
				this.show = false;
				this.queryData.userId = this.userInfo.id;
				this.queryData.patientId = this.patientInfo.patientId;
				this.queryData.patientName = this.patientInfo.name;
				PubApi.price(this.queryData).then(res => {
					console.table(res);
					this.loading = false;
					if (res.code === 0) {
						// this.dataText = res.data.dataText;
						const l = res.data.drugsList || [];
						this.$set(this, 'list', l);
						if (l.length == 0) {
							this.show = true;
							this.msg = '未查询到数据';
						}
					} else {
						that.show = true;
						that.msg = res.msg;
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
					this.msg = err.msg;
				})
			},
			// 计算可滑动区域的高度信息
			updateSwiperInfo() {
				// 获取可滑动菜单的信息
				this._tGetRect('.dawn-box').then(res => {
					if (!res) {
						setTimeout(() => {
							this.updateSwiperInfo()
						}, 10)
						return
					}
					// console.table(res)
					const systemInfo = uni.getSystemInfoSync()
					this.swiperHeight = systemInfo.safeArea.height - res.bottom - 70;
				})
			},

		}
	}
</script>


<style lang="scss" scoped>
	.list-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 0rpx !important;
		border-bottom: 1px solid $dawn-line-color;

		&__right {
			font-size: $dawn-font-size-md;
		}
	}

	.list {
		font-size: $dawn-font-size-base;

		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&__icon,
			&__image {
				margin-right: 6rpx;
				font-size: $dawn-font-size-md + 2;
				font-weight: bolder;
				color: $dawn-theme-color-dark;
			}

			&__text {
				white-space: nowrap;
				font-size: $dawn-font-size-sm;
				color: $dawn-color-grey;
				// font-weight: bolder;
			}
		}

		&__content {
			padding: 40rpx 20rpx;
			margin-bottom: 10rpx;
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-left: 20rpx;

			&__text {
				text-align: right;
				font-size: $dawn-font-size-base;
				font-weight: normal;
			}
		}
	}

	::v-deep .uni-table-scroll {
		width: 100%;
		overflow-x: auto;
		max-height: 300px !important;
		border-radius: $dawn-btn-radius !important;
		box-shadow: $dawn-box-shadow !important;
	}

	::v-deep .uni-table {
		position: relative;
		width: 100% !important;
		min-width: 100% !important;
		border-radius: 5px;
		background-color: #fff;
		box-sizing: border-box;
		display: table;
		overflow-x: auto;
		padding: 10px 5px !important;
	}

	::v-deep .uni-table-th {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding: 3px 3px !important;
		display: table-cell;
		box-sizing: border-box;
		font-size: 14px !important;
		font-weight: bold;
		color: #909399;
		border-bottom: 1px $dawn-line-color solid !important;
	}

	::v-deep .uni-table-td {
		display: table-cell;
		padding: 3px 3px !important;
		font-size: 14px !important;
		border-bottom: 1px $dawn-line-color solid !important;
		font-weight: 400;
		color: #000;
		line-height: 23px;
		box-sizing: border-box;
	}

	.dawn-input-text {
		// display: flex;
		// align-items: center;
		width: 90% !important;
		padding: 0px 5px !important;
		text-align: left !important;
		// border-radius: 3px !important;
		// border: 1px solid $dawn-border-color;
		// line-height: 88rpx !important;
		min-height: 60rpx !important;
		// height: 88rpx !important;
		// font-size: 14px !important;
		// box-shadow: $dawn-box-shadow;
		color: #000;
	}

	::v-deep .tn-input__input {
		min-height: 59rpx !important;
		font-size: $dawn-font-size-base !important;
	}
</style>